// styles/element-variables.scss
// 定义黄色系列颜色 - 完整的黄色调色板
$color-yellow-base: #FFCC00;
$color-yellow-light-1: #FFF380;
$color-yellow-light-2: #FFF9C4;
$color-yellow-light-3: #FFFBE6;
$color-yellow-light-4: #FFFEF0;
$color-yellow-light-5: #FFFFF8;
$color-yellow-light-6: #FFFFFD;
$color-yellow-light-7: #FFFFFE;
$color-yellow-light-8: #FFF8DC;
$color-yellow-light-9: #FFF5E6;
$color-yellow-dark-1: #FFC107;
$color-yellow-dark-2: #FFA000;
$color-yellow-dark-3: #FF8F00;
$color-yellow-dark-4: #FF6F00;

// 覆盖Element Plus的主题色变量，将主色调从蓝色改为黄色
$colors: (
  'primary': (
    'base': $color-yellow-base,
    'light-1': $color-yellow-light-1,
    'light-2': $color-yellow-light-2,
    'light-3': $color-yellow-light-3,
    'light-4': $color-yellow-light-4,
    'light-5': $color-yellow-light-5,
    'light-6': $color-yellow-light-6,
    'light-7': $color-yellow-light-7,
    'light-8': $color-yellow-light-8,
    'light-9': $color-yellow-light-9,
    'dark-1': $color-yellow-dark-1,
    'dark-2': $color-yellow-dark-2,
    'dark-3': $color-yellow-dark-3,
    'dark-4': $color-yellow-dark-4
  ),
);

// 通过 :root 设置全局CSS变量 - 完整覆盖所有主色调相关变量
:root {
  // 主色调基础变量
  --el-color-primary: #{$color-yellow-base};
  
  // 主色调浅色系列
  --el-color-primary-light-1: #{$color-yellow-light-1};
  --el-color-primary-light-2: #{$color-yellow-light-2};
  --el-color-primary-light-3: #{$color-yellow-light-3};
  --el-color-primary-light-4: #{$color-yellow-light-4};
  --el-color-primary-light-5: #{$color-yellow-light-5};
  --el-color-primary-light-6: #{$color-yellow-light-6};
  --el-color-primary-light-7: #{$color-yellow-light-7};
  --el-color-primary-light-8: #{$color-yellow-light-8};
  --el-color-primary-light-9: #{$color-yellow-light-9};
  
  // 主色调深色系列
  --el-color-primary-dark-1: #{$color-yellow-dark-1};
  --el-color-primary-dark-2: #{$color-yellow-dark-2};
  --el-color-primary-dark-3: #{$color-yellow-dark-3};
  --el-color-primary-dark-4: #{$color-yellow-dark-4};
  
  // 其他相关变量
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #C0C4CC;
  --el-border-color: #E4E7ED;
  --el-border-color-light: #EBEEF5;
  --el-border-color-lighter: #F2F6FC;
  --el-border-color-extra-light: #F5F7FA;
  --el-border-radius-base: 4px;
  --el-border-radius-small: 2px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;
}

// 全局定义黄色按钮样式 - 保持兼容性
.el-button.el-button--yellow {
  color: #333333 !important;
  background-color: #{$color-yellow-base} !important;
  border-color: #{$color-yellow-base} !important;
}

.el-button.el-button--yellow:hover {
  color: #333333 !important;
  background-color: #{$color-yellow-dark-1} !important;
  border-color: #{$color-yellow-dark-1} !important;
}

.el-button.el-button--yellow:active {
  color: #000000 !important;
  background-color: #{$color-yellow-dark-2} !important;
  border-color: #{$color-yellow-dark-2} !important;
}

